<script setup lang="ts">
// 创建响应式数据
import {ref, reactive} from "vue";
import zwTabBar from "@/components/zw-tabbar/zw-tabbar.vue";
import {POST_TYPE_LIST} from "@/constants";
import {getPostList} from "@/api/post";
import config from "@/config";
import {formatPostTime} from "@/utils/common";
// import ZPaging from "z-paging";
const baseUrl = ref(config.baseUrl)
// tab栏切换
const change = ({index}) => {
}
// 创建响应式数据
const list1 = reactive([
  {name: '关注'},
  {name: '推荐'},
  {name: '电影'},
  {name: '科技'},
  {name: '音乐'},
  {name: '美食'},
  {name: '文化'},
  {name: '财经'},
  {name: '手工'}
]);

// 定义方法
function click(item) {
  console.log('item', item);
}

const tabList = reactive([
  {name: '全部'},
  ...POST_TYPE_LIST
]);

const dataList = ref([])
const paging = ref(null)
const type = ref(null)

const tabClick = (evt: any) => {
  console.log('tabClick ', evt)
  evt.name = evt.name === '全部' ? null : evt.name
  type.value = evt.name
  paging.value.reload(true);
}

const queryList = (pageNo: any, pageSize: any) => {
  getPostList({
    pageNum: pageNo,
    pageSize: pageSize,
    type: type.value
  })
      .then(res => {
        paging.value.complete(res.rows)
      })
      .catch(err => {
        paging.value.complete([])
      })
}


const handleToPostDetail = (item) => {
  uni.navigateTo({
    url: '/pages/post/detail?id=' + item.id
  })
}
</script>

<template>

  <z-paging ref="paging" v-model="dataList" @query="queryList" auto-show-system-loading :empty-view-center="false"
            loading-more-no-more-text="已加载全部内容" empty-view-text="已加载全部内容">
    <template #top>
      <uni-nav-bar statusBar title="校园"/>
      <view class="header">
        <view class="title">工院校园圈子</view>
        <u-input
            class="search"
            placeholder="搜索贴子"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399;"
        ></u-input>
      </view>
      <view class="tabs">
        <u-tabs activeColor="#f29100" ref="tabs" :list="tabList" @click="tabClick"
                swiperWidth="750"></u-tabs>
      </view>
    </template>
    <view class="content">
      <view class="post-list">
        <view class="post-item" @click="handleToPostDetail(item)" v-for="(item,index) of dataList" :key="index">
          <view class="item-header">
            <u-image width="40" height="40" :src="baseUrl + item.userAvatar" shape="circle"></u-image>
            <view class="right">
              <view class="username">{{ item.userName }}</view>
              <view class="time">{{ formatPostTime(item.createTime) }}</view>
            </view>
          </view>
          <view class="item-content">
            <view class="txt">{{ item.content }}</view>
            <view class="img-wrapper">
              <u-image v-for="(img,index) of item.imgs.split(',')" :key="index" width="100" height="100" mode="aspectFill" :src="baseUrl + img"></u-image>
            </view>
          </view>
          <view class="item-footer">
            <view class="type">
              <text>#&nbsp;{{ item.type }}</text>
            </view>
            <view class="right">
              <view class="comment">
                <view class="iconfont_v2 icon-pinglun icon"></view>
                <text class="num">1</text>
              </view>
              <view class="like">
                <view class="iconfont_v2 icon-dianzan1 icon"></view>
                <text class="num">1</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
  <zwTabBar :defaultSel="0" :bigIdx="2"></zwTabBar>

</template>

<style scoped lang="scss">
page {
  height: 100%;
  background-color: #f3f3f3;
}

.tabs {
  width: 100%;
  overflow-y: scroll;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  .title {
    font-size: 34rpx;
    margin-right: 20rpx;
  }

  .search {
    flex: 200rpx 0 0;
    height: 60rpx;
    border-radius: 50rpx;
  }
}

.content {
  margin-bottom: 50rpx;

  .post-list {
    padding: 10rpx 20rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .post-item {
      margin-bottom: 30rpx;
      border-radius: 20rpx;
      padding: 14px 20rpx;
      background-color: #fff;

      &:last-child {
        margin-bottom: 0;
      }

      .item-header {
        display: flex;
        align-items: center;

        .right {
          margin-left: 14rpx;
          font-size: 28rpx;

          .username {
            color: #444141;
            margin-bottom: 4rpx;
          }

          .time {
            color: #6c6969;
          }
        }
      }

      .item-content {
        margin: 4rpx 0 20rpx 0;
        margin-left: 88rpx;

        .txt {
          margin-bottom: 10rpx;
        }
        .img-wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .img {
          }
          .img:nth-child(3n) {
            margin-bottom: 6rpx;

          }
        }
      }

      .item-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        margin-left: 88rpx;

        .type {

          text {
            background-color: #f3f3f3;
            color: #504e4e;
            padding: 8rpx 20rpx;
            border-radius: 18rpx;
            font-size: 22rpx;
            //margin-left: 20rpx;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
          }

        }

        .right {
          display: flex;

          .comment {
            margin-right: 30rpx;
          }
          .icon, .num {
            color: #908c8c;
          }
          .num {
            color: #a19e9e;
            margin-left: 6rpx;
          }
        }

      }
    }
  }

}
</style>
